<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <div>
      <el-form :inline="true"
               :model="dataForm"
               @keyup.enter.native="getDataList()">
        <el-form-item>
          <ejs-multiselect style="width:300px" id='sample-list2' :dataSource='datagrid' :fields='dataForm.remoteFields' :mode='boxMode' :placeholder="$t('demo.selectClients')"></ejs-multiselect>
        </el-form-item>
        <el-form-item>
          <ejs-daterangepicker :placeholder="dataForm.waterMarkText">
            <e-presets>
                <e-preset label="This Week" :start='dataForm.weekStartDate' :end='dataForm.weekEndDate'></e-preset>
                <e-preset label="This Month" :start='dataForm.monthStartDate' :end='dataForm.monthEndDate'></e-preset>
                <e-preset label="Last Month" :start='dataForm.lastMonthStartDate' :end='dataForm.lastMonthEndDate'></e-preset>
                <e-preset label="Last Year" :start='dataForm.lastYearStartDate' :end='dataForm.lastYearEndDate'></e-preset>
            </e-presets>
        </ejs-daterangepicker>
        </el-form-item>
      </el-form>
      <ejs-grid :dataSource="datagrid" :allowResizing='true'    :allowFiltering='true' :filterSettings='filterSettings' :ColumnMenu='rows' :frozenColumns='columns' :allowGrouping='true' :allowPaging='true' :toolbar="toolbar"  :showColumnChooser='true' :groupSettings='groupOptions' :allowReordering='true' :allowSorting='true' :pageSettings="pageSettings">
        <e-columns>
          <e-column field="id" :headerText="$t('demo.columnId')" textAlign="Right" width="90"></e-column>
          <e-column field="name" :headerText="$t('demo.columnName')" textAlign="Right" width="90"></e-column>
          <e-column field="bot_open" :headerText="$t('demo.columnBotOpen')" textAlign="Right" width="90"></e-column>
          <e-column field="mr" :headerText="$t('demo.columnMr')" textAlign="Right" width="90"></e-column>
          <e-column field="mr_percent" :headerText="$t('demo.columnMr') + '%'" textAlign="Right" width="90"></e-column>
          <e-column field="at" :headerText="$t('demo.columnAt') " textAlign="Right" width="90"></e-column>
          <e-column field="at_percent" :headerText="$t('demo.columnAt') + '%'" textAlign="Right" width="90"></e-column>
          <e-column field="nt" :headerText="$t('demo.columnId')" textAlign="Right" width="90"></e-column>
          <e-column field="nt_percent" :headerText="$t('demo.columnId') + '%'" textAlign="Right" width="90"></e-column>
          <e-column field="cw_user" :headerText="$t('demo.columnCw')" textAlign="Right" width="90"></e-column>
          <e-column field="office365_user" :headerText="$t('demo.office365User')" textAlign="Right" width="100"></e-column>
          <e-column field="psa" :headerText="$t('demo.columnPsa')" textAlign="Right" width="200"></e-column>
          <e-column field="ifau" :headerText="$t('demo.columnAu')" textAlign="Right" width="90"></e-column>
          <e-column field="ifhu" :headerText="$t('demo.columnHu')" textAlign="Right" width="90"></e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </el-card>
</template>

<script>

import detailTemplate from './detail.vue'
import moment from 'moment'
export default {
  data () {
    let year = new Date().getFullYear()
    return {
      datagrid: [],
      pageSettings: { pageSize: 10, pageSizes: [10, 50, 100, 200] },
      groupOptions: { columns: ['name'] },
      filterSettings: { type: 'Excel' },
      toolbar: ['ColumnChooser'],
      daterange: null,
      detailTemplate: function () {
        return { template: detailTemplate }
      },
      dataForm: {
        remoteFields: { text: 'name', value: 'id' },
        waterMarkText: 'Select a Range',
        minDate: new Date('1/15/2017'),
        maxDate: new Date('12/20/2017'),
        weekStartDate: moment().subtract('days', 6).format(),
        weekEndDate: moment().subtract('days', 0).format(),
        monthStartDate: new Date(new Date(new Date().setDate(1)).toDateString()),
        monthEndDate: new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toDateString()),
        lastMonthStartDate: moment().subtract(1, 'months').date(1).format(),
        lastMonthEndDate: moment().date(0).format(),
        lastYearStartDate: new Date(year - 1, 1, 1).toDateString(),
        lastYearEndDate: new Date(year - 1, 11, 31).toDateString()
      }
    }
  },

  created () {
    this.getSysInfo()
  },
  methods: {
    getSysInfo () {
      this.$interface.system.getSystemInfoApi().then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.sysInfo = res.data
      }).catch(() => { })
    }
  }
}
</script>
